src/utils/withRoles.tsx (3)

11-11: Remove unused import

The SimpleBackdrop component is imported but never used in this file.

-import SimpleBackdrop from '@/components/global/LoadingBackdrop';

---

Line range hint 47-52: Fix critical logic error in permission check

The permission check logic has a critical error. The unauthorized redirect is inside the if (hasPermission) block, which means it will never execute. This allows unauthorized users to access protected routes.

-      if (hasPermission) {
-        if (isPemissionLoaded && !hasPermission) {
-          router.push('/unauthorized');
-        }
-        setIsPermissionLoaded(true);
-      }
+      if (!hasPermission) {
+        router.push('/unauthorized');
+      }
+      setIsPermissionLoaded(true);

---

Line range hint 34-34: Fix typo in state variable name

The state variable name has a typo: isPemissionLoaded should be isPermissionLoaded.

-  const [isPemissionLoaded, setIsPermissionLoaded] = useState(false);
+  const [isPermissionLoaded, setIsPermissionLoaded] = useState(false);

src/pages/reputation-score/index.tsx (1)

89-91: Enhance URL construction robustness

The URL construction could be made more robust by:

1. Encoding the query parameters to handle special characters
2. Validating the presence of required values

-                          `/reputation-score/score?tokenId=${dynamicNFTModuleInfo?.metadata[0]?.tokenId}&address=${address}`
+                          `/reputation-score/score?${new URLSearchParams({
+                            tokenId: dynamicNFTModuleInfo?.metadata[0]?.tokenId?.toString() ?? '',
+                            address: address ?? ''
+                          }).toString()}`

src/pages/reputation-score/score.tsx (2)

26-41: Enhance error handling specificity

The error handling could be more specific to help users better understand and resolve issues:

1. Add specific error messages for different failure scenarios
2. Log structured error information

     try {
       const score = await retrieveReputationScore({ tokenId, address });
+      if (!score) {
+        throw new Error('No score data received');
+      }
 
       setReputationScore(score.reputationScore ?? 0);
       setCommunityName(score.communityName);
     } catch (err) {
-      console.error('Error fetching reputation score:', err);
-      setError('Failed to fetch reputation score.');
+      const errorMessage = err instanceof Error ? err.message : 'Unknown error occurred';
+      console.error('Error fetching reputation score:', {
+        error: err,
+        tokenId,
+        address
+      });
+      setError(`Failed to fetch reputation score: ${errorMessage}`);
     }

---

43-54: Move URL parameter validation to a custom hook

Consider extracting URL parameter validation to a custom hook for better reusability and earlier validation:

const useScoreParams = () => {
  const [params, setParams] = useState<{tokenId: string; address: string} | null>(null);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    const searchParams = new URLSearchParams(window.location.search);
    const tokenId = searchParams.get('tokenId');
    const address = searchParams.get('address');

    if (!tokenId || !address) {
      setError('Invalid URL format. Missing tokenId or address.');
      return;
    }

    setParams({ tokenId, address });
  }, []);

  return { params, error };
};

Configuration used: CodeRabbit UI
Review profile: CHILL

src/pages/reputation-score/score.tsx (4)

23-23: Enhance error handling with more user-friendly messages

The error messages could be more specific and user-friendly. Consider providing guidance on how to resolve the error.

-  const [error, setError] = useState<string | null>(null);
+  const [error, setError] = useState<{
+    title: string;
+    message: string;
+    action?: string;
+  } | null>(null);

// Later in the error UI:
   <div className='max-w-xl rounded-lg bg-white p-6 shadow-lg'>
-    <h1 className='text-2xl font-bold text-red-600'>Error</h1>
-    <p className='mt-4 text-gray-600'>{error}</p>
+    <h1 className='text-2xl font-bold text-red-600'>{error.title}</h1>
+    <p className='mt-4 text-gray-600'>{error.message}</p>
+    {error.action && (
+      <p className='mt-2 text-sm text-gray-500'>{error.action}</p>
+    )}
   </div>

Also applies to: 122-131

---

98-98: Improve null value handling in chart data

The current null check could be more explicit and handle edge cases better.

-        data: [reputationScore ? parseFloat(reputationScore.toFixed(1)) : 0],
+        data: [reputationScore === null ? 0 : Number(reputationScore.toFixed(1))],

---

Line range hint 143-152: Enhance share button accessibility

The share button could benefit from additional accessibility features.

 <button
   onClick={handleShare}
   className='text-primary-600 rounded-full bg-primary-100 p-2 hover:bg-primary-200'
   aria-label='Share Score'
+  role="button"
+  title="Share your reputation score"
+  aria-pressed="false"
 >
   <FiShare2 size={24} />
+  <span className="sr-only">Share your reputation score</span>
 </button>

---

124-129: Enhance error state semantic structure

The error state UI could benefit from more semantic HTML elements.

-<div className='flex min-h-screen items-center justify-center bg-gray-100'>
+<main role="main" className='flex min-h-screen items-center justify-center bg-gray-100'>
   <div className='max-w-xl rounded-lg bg-white p-6 shadow-lg'>
-    <h1 className='text-2xl font-bold text-red-600'>Error</h1>
+    <h1 className='text-2xl font-bold text-red-600' role="alert" aria-live="assertive">Error</h1>
     <p className='mt-4 text-gray-600'>{error}</p>
   </div>
-</div>
+</main>

Configuration used: CodeRabbit UI
Review profile: CHILL

-export default ScorePage;
+export default withRoles(ScorePage, ['view', 'admin']);